<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色添加</title>
</head>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/javascript/myjavascript/jQuery-1.12.4.js">
	
</script>
<link
	href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.min.css"
	rel="stylesheet" />
<script
	src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.min.js"></script>
<body>
	<%-- 	<h3>${list.size() }</h3> --%>
	<div class="container-fluid">
		<form action="role_insert.action" method="post">
			<div class="form-horizontal">
				<label for="roleId">角色名</label> <input class="form-control"
					id="roleId" type="text" name="roleName"
					placeholder="例如:productManager">
			</div>
			<div class="form-horizontal">
				<label for="roleInfo">角色说明</label> <input class="form-control"
					id="roleInfo" type="text" name="roleInfo" placeholder="例如:产品管理">
			</div>
			<div class="form-horizontal" style="margin-top: 10px">
				<label>角色权限</label>
			</div>
			<div class="form-horizontal" id="myper" style="width: 60%">
				<c:forEach items="${list}" var="p">
					<div class="checkbox" style="background-color: skyblue">
						<label><input type="checkbox" name="myper"
							value="${p.permissionId}" id="f${p.permissionId}"
							onclick="checkAll(this,'${p.pinfo}')">${p.pinfo} </label>
					</div>
					<c:if test="${p.list!=null }">
						<c:forEach items="${p.list}" var="p2">
							<div class="checkbox checkbox-inline">
								<label><input class="${p.pinfo}" type="checkbox"
									name="myper" value="${p2.permissionId}"
									onclick="checkF(this,f${p.permissionId},'${p.pinfo}')"> ${p2.pinfo}
								</label>
							</div>
						</c:forEach>
					</c:if>
				</c:forEach>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10"></div>
				<button type="submit" class="btn btn-default">保存角色信息</button>
				<button type="reset" class="btn btn-default">清空角色信息</button>
			</div>
		</form>

	</div>
	<script type="text/javascript">
		function checkF(obj,fid,pinfo) {
			/* alert(obj+""+fid); */
			if(obj.checked){
				fid.checked = true;
			}
			var arr = document.getElementsByClassName(pinfo);
			var t =false;
			for (var i = 0; i < arr.length; i++) {
		          if (arr[i].checked) {
		            t=true;
		          } 
				}
			if(t==false){
				fid.checked=false;
			}
			
		}
		function checkAll(obj,pinfo) {
			alert(pinfo)
		 var arr = document.getElementsByClassName(pinfo);
	        for (var i = 0; i < arr.length; i++) {
	          if (obj.checked) {
	            arr[i].checked = true;
	          } else {
	            arr[i].checked = false;
	          }
			}
	        
		}
	</script>
</body>
</html>